<template>
	<view class="card_details_container">
		<img src="/static/images/card.png" alt="" srcset="" class="card_img" />
		<view class="card_box">
			<view class="card_name">
				趣能卡
			</view>
			<view class="card_props">
				<view class="props_item">
					活跃力:{{cardDetails.gradesOne}}级
				</view>
				<view class="props_item">
					传播力:{{cardDetails.gradesTwo}}级
				</view>
				<view class="props_item">
					创作力:{{cardDetails.gradesThree}}级
				</view>
				<view class="props_item">
					影响力:{{cardDetails.gradesFour}}级
				</view>
				<view class="props_item">
					成长力:{{cardDetails.gradesFive}}级
				</view>
			</view>
		</view>
		<view class="bottom_btn">
			<view class="btn1" @click="handedZhuanZeng">
				转赠
			</view>
			<view class="btn2" @click="handedShengJi">
				升级
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						转赠
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose">
					</img>
				</view>
				<view class="pop_card_info flex">
					<img src="/static/images/card_img.png" alt="" class="pop_card_img" />
					<view>
						<view class="pop_card_title">
							趣能卡
						</view>
						<view class="pop_card_props">
							<view class="pop_props_item">
								活跃力:{{cardDetails.gradesOne}}级
							</view>
							<view class="pop_props_item">
								传播力:{{cardDetails.gradesTwo}}级
							</view>
							<view class="pop_props_item">
								创作力:{{cardDetails.gradesThree}}级
							</view>
							<view class="pop_props_item">
								影响力:{{cardDetails.gradesFour}}级
							</view>
							<view class="pop_props_item">
								成长力:{{cardDetails.gradesFive}}级
							</view>
						</view>
					</view>
				</view>
				<view class="pop_input_title">
					转赠给
				</view>
				<view class="pop_input">
					<input class="uni-input" v-model="phoneNo" placeholder="请输入对方手机号" />
				</view>
				<view class="pop_tips">
					注意：一旦转赠，无法进行撤回操作，转赠后不在享受该卡所有权益
				</view>
				<view class="pop_bottom_btn" @click="ZhuanZengConfirm">
					确认转赠
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop">
				<view class="pop_top">
					<view class="pop_title">
						升级类型
					</view>
					<img src="/static/images/close.png" class="pop_close" @click="popClose1">
					</img>
				</view>
				<view class="pop_card_info flex">
					<view>
						<view class="pop_card_title">
							属性升级
						</view>
						<view class="pop2_card_props">
							<view class="pop2_props_item" :class="propChooseI == 0?'pop2_props_item_a':''"
								@click="propsChoose(0)">
								活跃力:{{cardDetails.gradesOne}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 1?'pop2_props_item_a':''"
								@click="propsChoose(1)">
								传播力:{{cardDetails.gradesTwo}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 2?'pop2_props_item_a':''"
								@click="propsChoose(2)">
								创作力:{{cardDetails.gradesThree}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 3?'pop2_props_item_a':''"
								@click="propsChoose(3)">
								影响力:{{cardDetails.gradesFour}}级
							</view>
							<view class="pop2_props_item" :class="propChooseI == 4?'pop2_props_item_a':''"
								@click="propsChoose(4)">
								成长力:{{cardDetails.gradesFive}}级
							</view>
						</view>
					</view>
				</view>
				<view class="pop_bottom_btn" @click="ShengJiConfirm">
					确认升级
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="center" border-radius="10px 10px 0 0">
			<view class="zhuanzeng_pop2">
				<view class="pop_top">
					<view class="pop_title">
						属性升级
					</view>
				</view>
				<view class="pop_card_info flex justify-center">
					<view class="pop2_card_title text-center">
						{{propChooseName}}属性提升{{propUpgradeUse}}
					</view>
				</view>
				<view class="flex justify-center">
					<view class="pop2_bottom_btn1" @click="popCancel">
						取消
					</view>
					<view class="pop2_bottom_btn2" @click="popConfirm">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getCardDtails,
		cardpresent,
		cardUpgrade,
		getUpgradeJh
	} from "@/api/system/user";

	export default {
		data() {
			return {
				cardDetails: {},
				phoneNo: '',
				propChooseI: null,
				propChooseName:'',
				propUpgradeUse:''

			}
		},
		onLoad(options) {
			this.cardId = options.cardId
			this.getCardDetails()
		},
		methods: {
			getCardDetails() {
				getCardDtails(this.cardId).then(res => {
					this.cardDetails = res.data
				})
			},
			handedZhuanZeng() {
				this.$refs.popup.open()
			},
			handedShengJi() {
				this.$refs.popup1.open()
			},
			ZhuanZengConfirm() {
				if (this.phoneNo == '') {
					uni.showToast({
						title: "请先输入手机号",
						icon: 'none'
					})
					retrun
				}
				let params = {
					cardId: this.cardId,
					phone: this.phoneNo
				}
				cardpresent(params).then(res => {
					uni.showToast({
						title: "转赠成功",
						icon: 'none'
					})
					this.$refs.popup.close()
					uni.navigateBack()
				})
			},
			popClose() {
				this.$refs.popup.close()
			},
			popClose1() {
				this.$refs.popup1.close()
			},
			propsChoose(i) {
				this.propChooseI = i
			},
			ShengJiConfirm() {
				if (this.propChooseI == null) {
					uni.showToast({
						title: "请先选择升级属性",
						icon: 'none'
					})
					retrun
				}
				switch (this.propChooseI) {
					case 0:
						this.propChooseName = '活跃力'
						this.getUpgradeUse(this.cardDetails.gradesOne)
						break;
					case 1:
						this.propChooseName = '传播力'
						this.getUpgradeUse(this.cardDetails.gradesTwo)
						break;
					case 2:
						this.propChooseName = '创作力'
						this.getUpgradeUse(this.cardDetails.gradesThree)
						break;
					case 3:
						this.propChooseName = '影响力'
						this.getUpgradeUse(this.cardDetails.gradesFour)
						break;
					case 4:
						this.propChooseName = '成长力'
						this.getUpgradeUse(this.cardDetails.gradesFive)
						break;
					default:
						break;
				}
			},
			popCancel() {
				this.$refs.popup2.close()
			},
			popConfirm() {
				let params = {
					cardId: this.cardId,
					type: this.propChooseI+1
				}
				cardUpgrade(params).then(res => {
					uni.showToast({
						title: "升级成功",
						icon: 'none'
					})
					this.$refs.popup2.close()
					this.propChooseI = null
					this.getCardDetails()
				})
			},
			getUpgradeUse(level) {
				let params = {
					level:level
				}
				getUpgradeJh(params).then(res => {
					this.propUpgradeUse = res.data.configName + res.data.configValue
					this.$refs.popup1.close()
					this.$refs.popup2.open()
				})
				
			}
		}
	}
</script>

<style>
	.card_details_container {
		padding: 40rpx;
	}

	.card_img {
		width: 100%;
	}

	.card_box {
		background: #FFFFFF;
		box-shadow: 0rpx 22rpx 28rpx -6rpx #E9F3FF;
		border-radius: 40rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.card_name {
		font-size: 38rpx;
		font-weight: 600;
	}

	.card_props {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.props_item {
		width: 25%;
		margin-bottom: 20rpx;
	}

	.bottom_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 40rpx;
		width: 670rpx;
	}

	.btn1 {
		border: 1rpx solid #000;
		border-radius: 40rpx;
		padding: 14rpx 80rpx;
	}

	.btn2 {
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		padding: 14rpx 80rpx;
		margin-left: 40rpx;
	}

	.zhuanzeng_pop {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
	}

	.zhuanzeng_pop2 {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 40rpx;
		width: 650rpx;
		position: relative;
	}

	.pop_top {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.pop_close {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
	}

	.pop_title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.pop_card_img {
		width: 20%;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.pop_card_title {
		font-size: 28rpx;
		font-weight: 600;
	}

	.pop_card_props {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.pop_props_item {
		width: 160rpx;
		margin-bottom: 10rpx;
	}

	.pop_input_title {
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}

	.pop_input {
		background-color: #f1f1f1;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.pop_tips {
		font-size: 28rpx;
		font-weight: 500;
		color: #ffa940;
		margin-top: 20rpx;
	}

	.pop_bottom_btn {
		width: 100%;
		height: 80rpx;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.pop2_card_props {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.pop2_props_item {
		width: 295rpx;
		margin-bottom: 10rpx;
		background-color: #f1f1f1;
		padding: 20rpx;
		text-align: center;
		margin: 20rpx;
		cursor: pointer;
		border-radius: 40rpx;
	}

	.pop2_props_item_a {
		color: #1677ff;
	}

	.pop2_bottom_btn1 {
		height: 80rpx;
		border: 1rpx solid #000;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
		padding: 0 80rpx;
	}

	.pop2_bottom_btn2 {
		height: 80rpx;
		background-color: #000;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 20rpx;
		padding: 0 80rpx;
	}
</style>